import React, { Component, PropTypes } from 'react'
import { hashHistory } from 'react-router'
import { Icon } from 'antd-mobile'
import { TopNavHeader } from '../common'

export default class Profile extends Component {
  render() {
    return (
      <div className={`rt-profile-container`}>
        <TopNavHeader title="个人设置" />

        <RowPure
          className={`cm-margin-top`}
          left={<span>用户名</span>}
          right={<span>131****1234</span>}
        />
        <RowPure left={<span>会员单位</span>} right={<span>上海源蚁信息科技有限公司</span>} />
        <RowPure left={<span>联系电话</span>} right={<span>131****1234</span>} />
        <RowPure left={<span>修改密码</span>} right={<Icon type="right" />} />
        <RowPure
          left={<span>实名认证</span>}
          rightExtra={<img alt="auth" src={require('static/images/auth.png')} />}
          right={<Icon type="right" />}
        />

        <div
          className={`rt-return-btn`}
          onClick={() => {
            hashHistory.push('/')
          }}
        >
          退出登录
        </div>
      </div>
    )
  }
}

// pure react component
class RowPure extends Component {
  render() {
    const { left, right, rightExtra, className } = this.props
    return (
      <div className={`rt-row-box ${className}`}>
        <div className={`rt-left-box`}>
          {left}
        </div>

        <div className={`rt-right-box`}>
          {rightExtra ? rightExtra : null}
          {right}
        </div>
      </div>
    )
  }
}

RowPure.propTypes = {
  left: PropTypes.node.isRequired,
  right: PropTypes.node.isRequired,
  rightExtra: PropTypes.node,
  className: PropTypes.string,
}